<template>
  <div class="authorMonitored-authorMonitored">

    <div class="margin_top_20">
      <div class="row_item">选择行业</div>
      <!-- 标签列表 -->
      <first-label-radio></first-label-radio>
    </div>


    <div class="margin_top_20">
      <div class="input-group width_400px">
        <input type="text" class="form-control" v-model="userURL" @keyup.enter="startMonitor" placeholder="请复制需要监控的自媒体作者任意一篇文章的链接粘贴至此即可">
        <span class="input-group-btn">
          <button type="button" class="btn btn-primary" @click="startMonitor"><i class="fa fa-search"></i> 开始监控</button>
        </span>
      </div>

      <div class="margin_top_20">
        <div class="row_item">监控列表</div>
        <!-- 标签列表 -->
          <!--<ul class="label-list">-->
              <!--<li v-for="item in authorList" class="label-item">-->
                  <!---->
              <!--</li>-->
              <!--<li class="clear_both"></li>-->
          <!--</ul>-->
          <Tag v-for="(item,index) in authorList" closable color="blue" @on-close="deleteAuthorAction(item,index)">{{item.AMName}}</Tag>
      </div>

    </div>

    <!--<img src="../../../static/img/logo_.jpg"/>-->

    <div class="margin_top_20">
      <Table :columns="columns1" :data="tableData" @on-sort-change="sortChangeAction"></Table>

      <div class="page_center">
        <Page :total="100" @on-change="pageChangeAction" show-elevator></Page>
      </div>
    </div>
  </div>
</template>

<script>
import firstLabelRadio from "./child/firstLabelRadio.vue"
// 发送ajax 请求的组件
import getData from '../../api/getData'
// 分页的配置信息
import {page_config} from '../../config/config'

var authorMonitoredLogic = {

    // 根据作者查询作者得全部文章内容
    getAuthorMonitoringData: function(vueObj ){
//        int pageSize, int pageIndex, int OrderType, int OrderName
        var paramObj = {
            OrderType:vueObj.OrderType,
//            1 发布时间 2评论数 3 阅读量
            OrderName:vueObj.OrderName,
            pageSize: page_config.pagesize,
            pageIndex: vueObj.currentPage
        };
        getData.post("getAuthorMonitoringData", paramObj).then(function (response) {
            vueObj.tableData = response.data.data;
        })
        .catch(function (response) {
            console.log(response);
        });
    },

    // 全部作者监控名称以及平台
    getAuthor: function(vueObj ){
        getData.post("getAuthor").then(function (response) {
            vueObj.authorList = response.data.data;
//            根据作者查询作者得全部文章内容
            authorMonitoredLogic.getAuthorMonitoringData(vueObj);
        })
            .catch(function (response) {
                console.log(response);
            });
    },

    // 删除作者
    deleteAuthor_Author: function(itemObj,vueObj ){
        getData.post("deleteAuthor_Author",{AMID: itemObj.AMID}).then(function (response) {
            vueObj.authorList = response.data.data;
        })
            .catch(function (response) {
                console.log(response);
            });
    },

    // 收藏 或者 取消收藏  向服务器打交道
    collectAction: function( url, param, vueObj ){
        getData.post( url, {MCTID: param.AMDID} ).then(function (response) {
            var data = response.data;
            if(data.code == 0){
                param.ISSC = param.ISSC ? 0 : 1;
            }else{
                vueObj.$Message.info( data.msg ? data.msg : '网络错误，请稍后重试');
            }
        }).catch(function (response) {
            console.log(response);
        });
    },

    // 开始监控
    startMonitoring_Author: function(vueObj){
        getData.post( "startMonitoring_Author", {url: vueObj.userURL} ).then(function (response) {
            var data = response.data;
            console.dir(data);
            debugger

        }).catch(function (response) {
            console.log(response);
        });
    }
};

export default {
  data: function () {
    return {
//        作者得全部文章内容
        authorMonitoringDataList: [],
      // 作者列表
      authorList:[],
//      表格数据
      tableData:[],
        // 监控URL的地址
        userURL:"",
      columns1: [
        {
          title: '缩略图',
          key: 'AMDImage',
            width:100,
            render: (h, params) => {
//                        console.log("params.row.MCTImage ： " + params.row.MCTImage);
                var imgUrl = null;
                if(params.row.AMDImage == ""){
                    imgUrl = require('../../../static/img/logo_.jpg');
                }else{
                    imgUrl = params.row.AMDImage;
                }
                return h('div', {
                    attrs: {
                        style: 'width:50px;height: auto'
                    },
                }, [
                    h('img', {
                        // 正常的 HTML 特性
                        attrs: {
                            src: imgUrl,
                            style: 'width:100%;height: auto;'
                        },
                        on: {
                            click: function () {
//                                        console.dir(arguments);
//                                        return false;
                            }
                        }
                    })
                ]);
            }

        },
        {
          title: '标题',
          key: 'AMDTitle',
          ellipsis: true,
            render: (h, params) => {
                return h('div', [
                    h('a', {
                        attrs: {
                            href: params.row.AMDURL,
                            target:"_blank",
                            title: params.row.AMDTitle
                        },
                    }, params.row.AMDTitle)
                ]);
            }
        },
        {
          title: '类型',
          key: 'TypeName',
            width: 75
        },
        {
          title: '来源',
          key: 'AMDSource',
          align:"center",
            width: 75
        },
        {
          title: '时间',
          key: 'RDate',
            sortable: true
        },
        {
          title: '阅读',
          key: 'AMDAmout',
            sortable: true,
            width: 100
        },
        {
          title: '评论',
          key: 'AMDCommentNum',
            sortable: true,
            width: 100
        },
          {
              title: '收藏',
              key: 'ISSC',
              width: 75,
              render: (h, params) => {
                  return h('div', [
                      h('span', {
                          on: {
                              click: () => {
                                  this.markFavorite( params.row );
                              }
                          }
                      }, [
                          h('Icon', {
                              props: {
                                  type: params.row.ISSC ? 'star' : 'ios-star-outline'
                              },
                              style: {
                                  fontSize: '20px'
                              }
                          })
                      ])
                  ]);
              },
          }
      ],
        // 当前页面数
        currentPage:1,
//            1降序 2升序
        OrderType:1,
//            1 发布时间 2评论数 3 阅读量
        OrderName:1,
    }
  },
  mounted: function () {
//      全部作者监控名称以及平台
      authorMonitoredLogic.getAuthor(this);

  },
  methods:{
      // 开始监控 地址
      startMonitor(){
          authorMonitoredLogic.startMonitoring_Author(this);
      },
      // 标记收藏或者取消收藏
      markFavorite( param ){
          var url = param.ISSC == 1 ? 'nsc_Author' : 'sc_Author';
          authorMonitoredLogic.collectAction( url, param, this);
      },
      // 删除老师
      deleteAuthorAction( param ,index){
          this.authorList.splice(index, 1);
          authorMonitoredLogic.deleteAuthor_Author( param, this);
      },
      // 分页触发的事件
      pageChangeAction:function (currentPage) {
          this.currentPage = currentPage;
          authorMonitoredLogic.getAuthorMonitoringData(this);
      },
        // 查看table的详情
        showItemDetail:function(){
            console.log("showItemDetail")
        },
      // 排序的问题
      sortChangeAction: function(sortJson){
          var order = sortJson.order;
          var key = sortJson.key;
          if(key == "RDate"){
              this.OrderName = 1;
          }
          if(key == "AMDAmout"){
              this.OrderName = 3;
          }
          if(key == "AMDCommentNum"){
              this.OrderName = 2;
          }

          if(order == "desc"){
              this.OrderType = 1;
          }else{
              this.OrderType = 2;
          }
          authorMonitoredLogic.getAuthorMonitoringData(this);
      }
  },
  components:{
      firstLabelRadio
  }
}
</script>

<style scoped lang="scss">
    .authorMonitored-authorMonitored{
        .label-list{
            .label-item{
                float: left;
                padding: 5px 12px;
                background: #e5e5e5;
                margin-right: 10px;
            }
        }
    }
</style>
